<template>
	<view class="" style="background: #F1F1F1;width: 750rpx;height: 100vh;display: inline-block;">

		<!-- <u-navbar :customBack='backPage' back-icon-color='#fff'  :border-bottom="false"
			:background="{backgroundColor:'transparent'}" :immersive="true"></u-navbar> -->

		<!-- <image src="/static/coach_bg.png" style="height: 100vh;width: 100%;"></image> -->



		<view class="u-flex u-padding-20 u-flex-wrap">
			<view v-for="(item,index) in list" :key="index" style="width: 320rpx;margin-bottom: 20rpx;">
				<image :src="item.backgroundImage" style="width: 320rpx;height: 500rpx;vertical-align: middle;"></image>
				<view style="width: 100%;background: #fff;padding: 15rpx;text-align: center;">
					<u-button @click="preview(item)" size="mini" :custom-style="{widht:'300rpx',color:'#18D7B3'}">生成海报
					</u-button>
				</view>
			</view>

		</view>

		<u-popup mode="center" v-model="show">
			<view>
				<image :src="info.backgroundImage" style="width: 80vw;height: 80vh;vertical-align: middle;"></image>
				<view style="width: 100%;background: #fff;padding: 15rpx;text-align: center;">
					<u-button @click="wx" size="mini"
						:custom-style="{width:'400rpx',color:'#fff',background:'#18D7B3'}">保存</u-button>
				</view>
			</view>
		</u-popup>

		<!-- <view style="width: 690rpx;height: 800rpx;position:fixed;left: 50%;top: 50%;
		transform: translate(-50%,-50%);
		">
			<image mode="widthFix" src="/static/coach_bgw.png" style="width: 100%;height: 100%;"></image>
			<view class="info" style="position: absolute;left: 50%;top:45%;
		transform: translate(-50%,-50%)">
				<view class=" u-padding-40 u-text-center " style="margin: auto;width: 200rpx;">
					<u-image :src="user.headimg" width="120" height="120" shape="circle"></u-image>
					<view class="u-font-weight u-margin-top-20">
						{{user.nickname}}
					</view>
				</view>
				<tki-qrcode ref="qrcode" :val="val" :size="400" v-if="val" />
			</view>
		</view> -->
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import baseUrl from '../../common/baseUrl.js';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				info: {},
				show: false,
				list: [],
				user: {},
				val: ''
			}
		},
		async onLoad() {
			await this.jiazai()
			// this.$refs.qrcode._makeCode();
		},
		methods: {
			preview(item) {
				this.$u.post('/teacher/poster', {
					id:item.id
				}).then(res => {
					this.show=true
					this.info={backgroundImage:res} ;
					// let uid=res.id;
					// this.val=baseUrl.neturl+'?uid='+uid;
					
				}).catch(err => {})
			},
			// preview() {
		
			// },
			wx() {
				var oA = document.createElement("a"); // 创建一个a标签
				// 正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本 ,
				// a的download 谷歌浏览器必须同源才能强制下载，否则跳转到图片地址
				oA.download = this.info.backgroundImage.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[
				0];; // 设置下载的文件名，默认是'下载'
				oA.href = this.info.backgroundImage;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			},
			jiazai() {
				return new Promise((resolve, reject) => {
					this.$u.post('/teacher/share', {}).then(res => {
						this.list = res;
						// let uid=res.id;
						// this.val=baseUrl.neturl+'?uid='+uid;
						resolve(res)
					}).catch(err => {})
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1,
					fail: (err => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				})
			},
		}
	}
</script>

<style>
</style>
